<template>
  <div>
<!--  <h1>接收：{{this.$route.query.id}}</h1>-->
  <div>

    <van-nav-bar
        title="完善订单信息"
        left-text="返回"
        right-text="查看订单"
        left-arrow
        @click-left="back()"
        @click-right="select()"
    />
  </div>
    <van-progress pivot-text="" color="#ee0a24" :percentage="33" />
    <div style="width: 100%;height: 50%">
      <van-image
          class="img1"
          :src="this.$route.query.imgurl"
      />
    </div>
    <van-progress pivot-text="" color="#ee0a24" :percentage="66" />

  <div>
    <van-cell-group inset>
      <!-- 输入任意文本 -->
      <van-field v-model="this.reserve.peoplename" type="text" label="姓名:" />
      <!-- 输入手机号，调起手机号键盘 -->
      <van-field v-model="this.reserve.mun" type="number" label="入住人数:" />
      <!-- 允许输入正整数，调起纯数字键盘 -->
      <van-field v-model="this.reserve.phone" type="tel" label="手机号:" />
      <!-- 允许输入数字，调起带符号的纯数字键盘 -->
      <van-field v-model="this.reserve.idnum" type="number" label="身份证号:" />
      <!-- 输入密码 -->
      <van-field v-model="this.reserve.housprice"  label="酒店价格" />
    </van-cell-group>
    <van-progress pivot-text="" color="#ee0a24" :percentage="99" />
    <div style="width: 100%;height: 10%">
      <van-button type="primary" color="pink" size="large" @click="save()" style="width: 20%;float: left; margin-left: 30px;margin-top: 10px;">提交订单</van-button>
      <van-button type="primary" color="orange" size="large" @click="query()" style="width: 25%;margin-top: 10px;">查询支付状态</van-button>
      <van-button type="primary" :disabled="btn1" color="" size="large" @click="topay()" style="width: 20%;float: right; margin-right: 30px;margin-top: 10px;">确认支付</van-button>
    </div>

  </div>
  </div>

</template>

<script>
import { ref } from 'vue';
export default {
  name: "ReserveView",
  data() {
    const tel = ref('');
    const text = ref('');
    const digit = ref('');
    const number = ref('');
    const password = ref('');
    return {
      btn1:false,
      reserve:{
        housname: "",
        id:"",
        peoplename:"",
        mun:"",
        phone:"",
        idnum:"",
        housprice:"",
        token: this.$store.state.token,
      },houspay:{
        id:"",
        housname:"",
        token:"",
        money:"",
      },
    };
  },mounted() {
this.reserve.id=this.$route.query.id;
this.reserve.housname=this.$route.query.housname;
this.houspay.money=this.$route.query.money;
this.houspay.token=this.$route.query.token;
console.log(this.reserve.housname)
}
,methods:{
    back(){
      history.back();
    },query(){
      this.axios.get("/api/houspay/query.do?idnum="+this.reserve.idnum+"&token="+this.$store.state.token).then(r=>{
        if(r.data.code=200){
          this.$toast("已支付");
          /*this.btn1=true;*/
        }else {
          /*this.btn1=false;*/

          this.$toast(r.data.msg);
        }
      })
    },topay(){
      /*if (this.reserve.peoplename==""){
        this.btn1=false;
      }
      if (this.reserve.mun==0){
        this.btn1=false;
      }
      if (this.reserve.phone==""){
        this.btn1=false;
      }
      if (this.reserve.idnum==0){
        this.btn1=false;
      }
      if (this.reserve.housprice==0){
        this.btn1=false;
      }*/
      this.axios.post("/api/houspay/createpay.do",this.reserve).then(r=>{
        if(r.data.code=200){
          //创建支付成功
          document.write(r.data.data);
        }
      })
    },select(){

      this.$router.push({path:"/payserver",query:{imgurl:this.$route.query.imgurl}});
    },save(){
      this.axios.post("/api/reserve/save.do",this.reserve).then(r=>{
        if(r.data.code==200){
          this.$toast("亲！已经生成订单了哦!");
        }else {
          this.$toast("网络错误请重新填写！");
        }
      })
    }

  }
};

</script>

<style scoped>

</style>